<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/* 外边距？所有元素具备边框以外距离，四个，上下，左右
			外边距问题1  行内元素： a 、i、delete..只支持左右边距
			             布局，支持左右推动效果
						 解决方案：行转块！
			常用属性：常用margin属性：两个属性值；  margin：0 auto；居中		
		*/
		 span{
			 width: 50%;
			border: 1px solid red;
			/*margin外边距属性：1个属性值 上   右    下    左 */
			margin: 100px;   /* ?  上下  左右   上下效果没有   ？*/
			/*margin外边距属性：2个属性值  上下 左右*/
			margin: 100px 200px;
			/*margin外边距属性：3个属性值  上  右左  下*/
			margin: 100px 200px 300px ;
			/*margin外边距属性：4个属性值  上  右  下  左*/
			margin: 100px 200px 300px 400px ;
			/* 常用属性：自适应居中 */
			margin: auto;
			margin-left: 50px;
		 }
		 h1{
		 			 width: 50%;
		 			 border: 1px solid red;
		 			 margin:300px;
		 			 margin: auto;
					 text-align: center;
		 		 }
		 		 a{
		 			 border: 1px solid red;
		 			 margin: 300px;
		 		 }
		 /* 外边距问题2：外边距合并问题:  
		 上下元素都存在外边距，垂直以最大外边距值为主
		 外边距处置合并：最大外边距为主，怎么解决？ 
		 推荐：1.margin设置一个值，上下会垂直，去掉一个上下元素其中上/下边距,重新计算
		       2.padding代替margin
		  */
		 #parent{
			 width: 200px;
			 height: 200px;
			 background: #ff55ff;
			/* 下外边距 */
			/* margin-top: 30px;
			margin-bottom: 0px;
			overflow: auto; */
			margin-top: 30px;
			/* 父元素：border:1px solid transparent */
			border:1px solid transparent
			/* 父元素：overflow */
			overflow:hidden;
		 }
		 #child{		
			 width: 100px;
			 height: 100px;
			 background: #00ffff;
			 margin-top: 30px;			
		 }
		</style>
	</head>
	<body>
		<h1>外边距合并</h1>
		<div id="parent">
		<div id="child"></div>
		</div>
		<hr>
		<!-- 元素：存在与框模型=外边距+边框+内边距+内容
		 有些元素默认外边距，处理方案：通配选择器，去掉元素外边距
		 -->
		<span>行内元素</span>
		<h1>块元素</h1>
		<a>apple</a >
				<input type="text">
				<table>
					<tl>
						<td>1</td>
					</tl>
				</table>
	</body>
</html>

<!--  测试元素存不存在外边距？
      ul     li        √
	  form   input     ×
	  table  tr  td    ×
	  p                √
	  *{margin：0}
 
 
 -->